<template>
	<view class="message">
		<u-form :model="form" ref="uForm" label-width="200rpx">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="预约档期类别" prop="type">
				<u-input v-model="form.type" />
			</u-form-item>
			<u-form-item label="预约安排时间" prop="formTime">
				<u-input v-model="form.formTime" />
			</u-form-item>
			<u-form-item label="档期日选择" prop="formDate">
				<u-input v-model="form.formDate" />
			</u-form-item>
			<u-form-item label="服务项目" prop="items">
				<u-input v-model="form.items" @click="openItems"/>
				<u-icon name="arrow-right" size="28" @click="openItems"></u-icon>
				<u-picker mode="selector" v-model="show"  :default-selector="[0]" 
				 :range="selectorObj" range-key="cateName" @confirm="onConfirm"></u-picker>
			</u-form-item>
			<u-form-item label="备注" prop="remarks">
				<u-input v-model="form.remarks" />
			</u-form-item>
		</u-form>
		<u-button type="primary">确定</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				selectorObj: [
					{
						cateName: '洗剪吹',
						id: 1
					},
					{
						cateName: '烫发',
						id: 2
					},
					{
						cateName: '染发',
						id: 3
					}
				],
				form: {
					name: '',
					type: '',
					formTime: '',
					formDate: '',
					items: '',
					remarks: '',
				}
			}
		},
		methods: {
			/**
			 * 打开服务项目
			 */
			openItems() {
				this.show = true
			},
			/**
			 * 确认服务项目
			 */
			onConfirm(e) {
				this.form.items = this.selectorObj[e[0]].cateName
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		margin: 20rpx;
		.u-form {
			background-color: #fff;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			.u-icon {
				position: absolute;
				right: 0;
			}
		}	
	}
</style>